<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>个人工作上报管理<small>个人工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>个人工作</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">待审核</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <p align="center" style="font-size: larger;font-weight: normal;color: #3c8dbc">个人待审核报表</p>
                <!--表格-->
                <template>
                    <el-table
                            :data="tableData"
                            ref="multipleTable"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="formNumber"
                                label="报表编号"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="workDate"
                                label="工作日期"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="submitDate"
                                label="填报日期"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="reviewer"
                                label="审核人"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template  slot-scope="scope">
                                <el-row>
                                    <el-button type="primary" size="small" @click="checkSubmitItem(scope.$index)">查看</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <!--查看报表工作项弹框-->
                <el-dialog
                        title="待审核报表详细信息"
                        :visible.sync="dialogVisibleCheckItem"
                        width="80%"
                        align="center">
                    <span style="font-family: 华文楷体">报表编号：</span>
                    <span v-model="formNumber" style="margin-right: 135px;font-family: 华文楷体">{{formNumber}}</span>
                    <span style="font-family: 华文楷体">完成日期：</span>
                    <span v-model="workDate"  style="margin-right: 135px;font-family: 华文楷体">{{workDate}}</span>
                    <span style="font-family: 华文楷体">提交时间：</span>
                    <span v-model="submitDate" style="font-family: 华文楷体">{{submitDate}}</span><br/>
                    <hr style="height:1px;border-radius: 3px; background-color: #3c8dbc">
                    <div>
                        <template>
                            <el-table
                                    :data="checkTableData"
                                    ref="checkMultipleTable"
                                    style="width: 100%;"
                                    :row-class-name="tableRowClassName"
                                    @selection-change="checkHandleSelectionChange">
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="50">s
                                </el-table-column>
                                <el-table-column
                                        prop="item"
                                        label="工作项"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="grade"
                                        label="单项分值"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="number"
                                        label="数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="count"
                                        label="小计"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="remark"
                                        label="备注"
                                        align="center">
                                </el-table-column>
                            </el-table>
                            <!--按钮-->
                            <div style="margin-top: 10px" align="center">
                                <el-row>
                                    <el-button style="margin-right: 30px" type="primary" @click="goBack()" plain>返回</el-button>
                                </el-row>
                            </div>
                        </template>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--表格相关数据-->
                tableData: [],
                checkTableData:[],
                <!--查看报表工作项信息弹框-->
                dialogVisibleCheckItem:false,
                input:[],
                <!--查看报表弹窗表格相关数据-->
                formNumber:'',
                workDate:'',
                submitDate:'',
            };
        },
        created() {
            this.findAll();
        },
        methods: {
            <!--查询当前用户的所有待提交报表信息-->
            findAll(){
                let idCardNumber = "440882199412204773";
                axios.get("/kpi_assess/submitForms/" + idCardNumber).then((resp)=>{
                    this.tableData = resp.data.data;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].submitDate = new Date(this.tableData[i].submitDate).toLocaleString();
                        this.tableData[i].workDate = new Date(this.tableData[i].workDate).toLocaleDateString();
                    }
                });

            },
            <!--查看报表：弹窗显示-->
            checkSubmitItem(index){
                this.dialogVisibleCheckItem=true;
                this.checkTableData = this.tableData[index].submitItems;
                this.formNumber = this.tableData[index].formNumber;
                this.workDate = this.tableData[index].workDate;
                this.submitDate = this.tableData[index].submitDate;
            },
            <!--查看报表弹窗：点击返回按钮-->
            goBack(){
                this.dialogVisibleCheckItem=false;
            }
        }
    })
</script>
</html>